import React from 'react'
import {
    Container,
    Header,
    Title,
    Footer,
    FooterTab,
    Button,
    Left,
    Right,
    Body,
    Icon,
    Text,
    View, SwipeRow,
    Grid,
    Col
} from 'native-base'
import { navigate } from '../utils/navigation'
import Content from '../components/MyContent'
import { Image, StyleSheet, PixelRatio } from 'react-native'

class HomePage extends React.Component {

  handlePressLogin = () => {
      navigate('Test', { transition: 'forVertical' })
  }

  render() {

      return (
          <Container loading={true}>
              <Header style={{ backgroundColor: '#DC143C' }}>
                  <Left>
                      <Button transparent>
                          <Icon ios="ios-menu" android="md-menu" style={{ color: 'white' }} />
                      </Button>
                  </Left>
                  <Body>
                      <Title>Header</Title>
                  </Body>
                  <Right />
              </Header>
              <Content scrollEnabled={false}>
                  <SwipeRow
                      leftOpenValue={75}
                      rightOpenValue={-75}
                      left={
                          <Button success onPress={() => alert('Add')}>
                              <Icon active name="add" />
                          </Button>
                      }
                      body={
                          <Grid>
                              <Col>
                                  <Image style={styles.imgView} source={{ url: 'http://statics.zhuishushenqi.com/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F683354%2F_683354_716237.jpg%2F' }} />
                              </Col>
                              <View style={styles.rightContainer}>
                                  <Text style={styles.bookTitle}>最强狂兵</Text>
                                  <Text>SwipeRow Body Text</Text>
                              </View>
                          </Grid>
                      }
                      right={
                          <Button danger onPress={() => alert('Trash')}>
                              <Icon active name="trash" />
                          </Button>
                      }
                  />
              </Content>
              <Footer>
                  <FooterTab>
                      <Button full onPress={this.handlePressLogin}>
                          <Text>Footer</Text>
                      </Button>
                  </FooterTab>
              </Footer>
          </Container>
      )
  }
}

const styles = StyleSheet.create({
    imgView: {
        width: PixelRatio.roundToNearestPixel(34),
        height: PixelRatio.roundToNearestPixel(44),
        marginLeft: PixelRatio.roundToNearestPixel(15),
        marginRight: PixelRatio.roundToNearestPixel(15),
        resizeMode: Image.resizeMode.cover,
    },
    rightContainer: {
        flex: 5,
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        flexDirection: 'column',
    },
    bookTitle: {
        fontSize: 13,
        alignItems: 'flex-start',
    }
})

export default HomePage
